<template>
    <van-sticky>
        <div class="kickback_header">
            <div class="left">
                <div>可提现(元): <span>{{ CashableAmount }}</span></div>
                <div>累计提现(元): <span>{{ CumulativeAmount }}</span></div>
            </div>
            <div class="right" @click="OnCashable">
                立即提现
            </div>
        </div>

        <van-tabs v-model:active="TabActive" type="card" sticky background="#288BD6" @click-tab="OnTab">
            <van-tab v-for="item in TabList" :title="item.title" :name="item.status"></van-tab>
        </van-tabs>
    </van-sticky>

    <div class="kickback">
        <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="OnLoad"
            >
                <div class="list">
                    <div class="item" v-for="(item,index) in list" :key="index">
                        <div class="left">
                            <div class="img">
                                <img :src="item.product?.thumbs_text" />
                            </div>
                            <div class="content">
                                <div class="nickname">订单号：{{ item.order_code }}</div>
                                <div class="tel">商品名称：{{ item.product.name }}</div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="status" @click="status = '0' ? OnCashable(item) : ''" >{{ item.status = '0' ? '立即领取' : item.status_text }}</div>
                            <div class="money">{{ item.amount.amount }}</div>
                        </div>
                    </div>

                    <van-back-top :bottom="'80'" />
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 用户信息
const business = proxy.$business;
// 分销会员数据
const list = ref([]);
// 数据总条数
const ListCount = ref(0);
// 刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 加载状态
const finished = ref(false);
// 当前页
const page = ref(1);
// tab选中状态
const TabActive = ref(0);
// tab数据
const TabList = ref([
    {
        title:'未提现',
        status:0
    },
    {
        title:'已提现',
        status:1
    }
]);
// 可提现
const CashableAmount = ref('0.00');
// 累计提现
const CumulativeAmount = ref('0.00')

// 下拉刷新
const OnRefresh = () =>
{
    // 清空查询参数
    finished.value = false;
    page.value = 1;
    list.value = [];
    loading.value = true;

    // 加载数据方法
    setTimeout(OnLoad,1500);
}

// 上拉加载
const OnLoad = async () =>
{
    // 如果等于true说明当前进行下拉刷新
    if(refreshing.value)
    {
        // 结束下拉刷新
        refreshing.value = false;
    }

    // 组装数据
    let params = {
        busid:business.value.id,
        page:page.value,
        status:TabActive.value
    }

    // 发起请求
    let result = await proxy.$http.post({
        url:'/sale/money',
        params
    })

    // 请求发送完毕后，加载状态也就完毕了, （存在需要防抖bug，不可快速点击或多次持续点击。）
    loading.value = false;

    // 后端不管记录是否有，都会返回可提现佣金和累计佣金，所以优先在这里处理
    CumulativeAmount.value = result.data.CumulativeAmount.toFixed(2);
    CashableAmount.value = result.data.CashableAmount.toFixed(2);

    if(result.code === 1)
    {
        // 合并数组
        list.value = list.value.concat(result.data.list);
        ListCount.value = result.data.count;

        // 如果没有更多数据了，就说明已经加载到底了
        if(list.value.length === ListCount.value)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else
    {
        finished.value = true;

        proxy.$fail(result.msg);
    }
}

// tab点击事件
const OnTab = async () =>
{
    OnRefresh();
}



// 提现
const OnCashable = async (item) =>
{
    // console.log(item);
    let message = item ? '是否确认提现该笔佣金？' : '是否确认提现全部佣金？';
    let params = {
        busid: business.item
    };

    if (item && item.status === '0') {
        params.id = item.id;
    }

    proxy.$confirm({
        title:'佣金提现',
        message: message
    }).then(async () =>
    {
        let params = {
            busid:business.value.id
        }

        let result = await proxy.$http.post({
            url:'/sale/cashable',
            params
        })

        if(result.code === 1)
        {
            proxy.$success({
                message:result.msg,
                onClose:() =>
                {

                    // 重新计算累计佣金
                    let total = parseFloat(result.data.CumulativeAmount) + parseFloat(CumulativeAmount.value);

                    // 重新赋值
                    CumulativeAmount.value = total.toFixed(2);
                    CashableAmount.value = '0.00';
                    list.value = [];

                    if (item) {
                        // 如果是单个佣金提现，更新该项的状态
                        item.status = '1';
                        item.status_text = '已提现';
                    } else {
                        // 如果是全部提现，清空列表
                        list.value = [];
                    }
                }
            })
            
        }else
        {
            proxy.$fail(result.msg);
        }

    }).catch((err) => {})
}
</script>

<style scoped>
@import url('/assets/css/SaleMoney.css');
</style>